import { constantRoutes, asyncRoutes } from '@/router'
// 默认有静态路由权限
const state = {
  routes: constantRoutes
}
// 更新路由: 静态路由和权限过滤完成的动态路由合并
const mutations = {
  setRoutes(state, newRoutes) {
    state.routes = [...constantRoutes, ...newRoutes] // 所有的路由
    // 第一次是 constantRoutes + newRoutes
    // 第二次 constantRoutes + newRoutes(上一个用户的路由标识) + newRoutes(新的路由标识)
  }
}
// 为什么不用router实例中的routes addRoutes不会更新router.option.routes 所以分两条路走
// 1. 通过vuex store 更新维护routes给到左侧菜单展示
// 2. 通过router 的addRoutes方法更新router匹配规则增加页面访问权限
// 左侧菜单展示权限
// 页面访问权限
// 动态路由和menus中的标识进行匹配 -> mutations去更新路由 -> 左侧菜单
// 动态路由和menus中的标识进行匹配 -> 更新router实例的匹配规则(addRoutes) -> 访问动态路由
const actions = {
  filterRoutes(context, menus) {
    // 对asyncRoutes进行过滤
    const routes = asyncRoutes.filter(item => {
      return menus.includes(item.name) // 标识和动态路由匹配 item.name做标识，以后工作中也可以用meta去做标识，可以定义数组，对象
    })
    // 更新路由
    context.commit('setRoutes', routes)
    return routes // 为了给addRoutes使用
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
